<template>
	<view>
		<custom-nav-sq-xcx :isBack="false" currBg="usuallyBg" :needConBlock="true">
			<template v-slot:search="{user}">
				<sq-search searchTxt="请输入课程关键字" :hasBack="user.hasBack" searchType="sqCourse"></sq-search>
			</template> 
		</custom-nav-sq-xcx>
		<view class="tabBox" :style="{top:navHeight + 'px'}">
			<swiper-tab :tab-list="tabList" :tabClass="courseListCls" currSys="sqSysRes" :tabIndex.sync="tabIndex" @change="tabChange"></swiper-tab>
		</view>
		<view class="block"></view>
		<view class="padd">
			<view class="banner">
				<sq-swiper-banner swiperHeight="240"></sq-swiper-banner>
			</view>
			<sq-mod-tit
				title="精品"
				specTit="课" 
				endTit="程"
				smTit="专业课程 助理成长"
				:needMore="true"
				@handleMore="goMoreJpRes"
			></sq-mod-tit>
		</view>
		<view class="jpCourse">
			<view class="jpList">
				<view class="jpImg posRel">
					<image class="samePar posAbso" :src="getStaticFilePath('kcItemFm.png')"></image>
					<image class="playImg posAbso" :src="getStaticFilePath('resPlay.png')"></image>
					<view class="resTag posAbso">精品课程</view>
				</view>
				<view class="resName ellip">绅士心理上的美学反倒是疗法会计师</view>
			</view>
		</view>
		<view class="padd">
			<view class="allCourse" :class="[fixedFlag ? 'hasFixed' : '']" :style="{top:(navHeight+tabBoxHei) + 'px'}">
				<sq-mod-tit
					title="所有"
					specTit="课"
					endTit="程"
					:fixedFlag="fixedFlag"
				>
					<block slot="otherCon">
						<view class="tabNav hasFlex">
							<view class="navItem"
								:class="[smTabIndex == index ? 'active' : '']"
								v-for="(item,index) in smTabList"
								:key="index"
							>
								<text>{{item.name}}</text>
								<view class="lineView"></view>
							</view>
						</view>
					</block>
				</sq-mod-tit>
			</view>
			<view class="courseList">
				<course-list></course-list>
			</view>
		</view>
	</view>
</template>

<script>
	import SqSearch from '@/components/sq-search/sq-search'
	import SwiperTab from '@/components/swiper-tab/swiper-tab';
	import SwiperBanner from '@/components/sq-swiper-banner'
	import SqModTit from '@/components/sq-mod-tit'
	import CourseList from './components/CourseList'
	export default {
		components:{
			SqSearch,
			SwiperTab,
			SwiperBanner,
			SqModTit,
			CourseList
		},
		data(){
			return{
				navHeight:getApp().globalData.navHeight,
				tabList: [
					{ id:'sqwh', name: '社区文化'},
					{ id:'xlkp', name: '心理科普'},
					{ id:'jkbj', name: '健康保健'},
					{ id:'jtgx', name: '家庭关系'},
					{ id:'qzjy', name: '亲自教育'},
					{ id:'xypx', name: '职业培训'},
					{ id:'shbk', name: '生活百科'},
					{ id:'qt', name: '其他'}
				],
				tabIndex: 0,
				courseListCls:'courseListTab',
				bannerList:['11'],
				smTabList:[{id:'xlk',name:'系列课程'},{id:'sp',name:'视频'},{id:'wz',name:'文章'}],
				smTabIndex:0,
				tabBoxHei:0,
				courseTop:0,
				fixedFlag:false
			}
		},
		onLoad(){
			uni.createSelectorQuery().select('.tabBox').boundingClientRect(data => {
				this.tabBoxHei = data.height;
			}).exec()
			uni.createSelectorQuery().select('.allCourse').boundingClientRect(data => {
				this.courseTop = data.top;
			}).exec()
		},
		onPageScroll(e){
			let {scrollTop} = e;
			if(scrollTop >= (this.courseTop - this.navHeight)){
				this.fixedFlag = true;
			}else{
				this.fixedFlag = false;
			}
		},
		methods:{
			goMoreJpRes(){
				uni.navigateTo({
					url:'/pages/subSqCourse/jpResList/jpResList'
				})
			},
			tabChange(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/sqSearch.scss';
	.tabBox{
		position: sticky;
		left: 0;
		z-index: 10;
	}
	.block{
		height: 120rpx;
		margin-bottom: -120rpx;
		background: $pss-sq-main-bg;
	}
	.banner{
		margin-bottom: 20rpx;
	}
	.jpCourse{
		display: flex;
		overflow: hidden;
		overflow-x: auto;
		margin:10rpx 0 20rpx;
		.comBor{
			border-radius: 0 8rpx 50rpx 8rpx;
		}
		.jpList{
			width: 240rpx;
			height: 280rpx;
			flex-shrink: 0;
			margin-right: 50rpx;
			text-align: center;
			background: #F5C651;
			margin-top: 20rpx;
			@extend .comBor;
			.jpImg{
				width: 240rpx;
				height: 240rpx;
				position: relative;
				.samePar{
					@extend .comBor;
					left: -20rpx;
					top: -20rpx;
				}
				.playImg{
					width: 46rpx;
					height: 46rpx;
					right: 40rpx;
					bottom: 40rpx;
				}
				.resTag{
					height: 50rpx;
					line-height: 50rpx;
					background: #F5C651;
					color: #fff;
					border-radius: 12rpx 0 0 12rpx;
					right: 0;
					top: 30rpx;
					font-size: 24rpx;
					padding: 0 15rpx;
				}
			}
			.resName{
				font-size: 28rpx;
				color: $sq-main0;
				margin-top: -10rpx;
				text-align: center;
				padding: 0 10rpx;
			}
			&:first-child{
				margin-left: 50rpx;
			}
			&:last-child{
				margin-right: 30rpx;
			}
		}
	}
	.allCourse{
		background: #fff;
		.tabNav{
			height: 80rpx;
			.navItem{
				flex: 1;
				position: relative;
				text-align: center;
				color:$sq-main8;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.lineView{
					width: 22%;
					height: 8rpx;
					background:$sq-line-linear ;
					position: absolute;
					left: 39%;
					bottom: 6px;
					display: none;
				}
				&.active{
					.lineView{
						display: block;
					}
				}
			}
		}
		&.hasFixed{
			position:fixed;
			width: 100%;
			left: 0;
			top: 300rpx;
			z-index: 20;
			box-shadow: 0 6rpx 6rpx rgba(0,0,0,.05);
			.tabNav{
				height: 100rpx;
				.lineView{
					bottom: 20rpx;
				}
			}
		}
	}
	.courseList{
		margin-top: 30rpx;
	}
</style>